<mat-card class="card card-square">
  <ix-fake-progress-bar [loading]="isLoading()"></ix-fake-progress-bar>

  <mat-card-header class="header">
    <mat-card-title>{{ 'Unix Permissions Editor' | translate }}</mat-card-title>

    <div class="dataset-path">
      <div class="dataset-path-label">{{ 'Dataset' | translate }}:</div>
      <div class="dataset-path-value" [matTooltip]="datasetPath">
        {{ datasetPath }}
      </div>
    </div>
  </mat-card-header>

  <mat-card-content>
    <form [formGroup]="form" (submit)="onSubmit()">
      <div class="owner-and-access">
        <ix-fieldset class="owner-fields" [title]="'Owner' | translate">
          <ix-combobox
            formControlName="owner"
            [label]="'User' | translate"
            [tooltip]="tooltips.user | translate"
            [provider]="userProvider"
            [required]="isToApplyUser"
          ></ix-combobox>

          <ix-checkbox
            formControlName="applyUser"
            [label]="'Apply User' | translate"
            [tooltip]="tooltips.applyUser | translate"
          ></ix-checkbox>

          <ix-combobox
            formControlName="ownerGroup"
            [label]="'Group' | translate"
            [tooltip]="tooltips.group | translate"
            [provider]="groupProvider"
            [required]="isToApplyGroup"
          ></ix-combobox>

          <ix-checkbox
            formControlName="applyGroup"
            [label]="'Apply Group' | translate"
            [tooltip]="tooltips.applyGroup | translate"
          ></ix-checkbox>
        </ix-fieldset>
        <ix-fieldset class="access-fields" [title]="'Access' | translate">
          <ix-permissions
            formControlName="mode"
            [label]="'Access Mode' | translate"
            [tooltip]="tooltips.mode | translate"
          ></ix-permissions>
        </ix-fieldset>
      </div>
      <div class="advanced-fields">
        <ix-fieldset [title]="'Advanced' | translate">
          <ix-checkbox
            formControlName="recursive"
            [label]="'Apply permissions recursively' | translate"
            [tooltip]="tooltips.recursive | translate"
          ></ix-checkbox>

          @if (isRecursive$ | async) {
            <ix-checkbox
              formControlName="traverse"
              [label]="'Apply permissions to child datasets' | translate"
              [tooltip]="tooltips.traverse | translate"
            ></ix-checkbox>
          }
        </ix-fieldset>
      </div>

      <div class="form-actions">
        <button
          *ixRequiresRoles="requiredRoles"
          mat-button
          class="save-button"
          type="submit"
          color="primary"
          ixTest="save"
          [disabled]="form.invalid || isLoading()"
        >
          {{ 'Save' | translate }}
        </button>
        <button
          mat-button
          type="button"
          ixTest="cancel"
          [routerLink]="['/datasets', datasetId]"
        >
          {{ 'Cancel' | translate }}
        </button>

        <ng-container *ixRequiresRoles="requiredRoles">
          @if (canSetAcl) {
            <button
              class="set-acl-button"
              mat-button
              type="button"
              ixTest="set-acl"
              (click)="onSetAclPressed()"
            >
              {{ 'Set ACL' | translate }}
            </button>
          }
        </ng-container>
      </div>
    </form>
  </mat-card-content>
</mat-card>
